<template>
    <base-modal class="specs-dialog-modal" :title="$t('order.setting.title1')" width="536px" :show.sync="dialogVisible" @close="closeDialog">
        <div class="logistics_setting_box">
            <el-form label-position="top" ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item :label="$t('order.setting.title2')" prop="fieldName">
                    <el-input v-model="form.fieldName" maxlength="20" :placeholder="$t('order.setting.title4')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('order.setting.title3')" required>
                    <el-form-item class="specs-value" v-for="(item, index) in form.valueList" :key="`value_${index}`" :prop="`valueList.${index}.value`" :rules="rules.value">
                        <div class="item-desc">
                            <el-input v-model="item.value" :placeholder="$t('order.setting.title4')" maxlength="20"></el-input><i class="iconfont icon-delete" @click="delValue(index)"></i>
                        </div>
                    </el-form-item>
                </el-form-item>
                <el-button type="primary" @click="addSpecsValue">{{this.$t('common.base.add2')}}</el-button>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">{{$t('common.base.close')}}</el-button>
            <el-button type="primary" @click="confirm">{{$t('common.base.confirm')}}</el-button>
        </div>
    </base-modal>
</template>

<script>
import _ from 'lodash';
import { isEmpty } from '@src/util/type';
import { saveSpecs } from '@src/api/LinkcApi';
export default {
    name: 'specs-dialog',
    props: {
        
    },
    data () {
		return {
            dialogVisible: false,
			form: {
                fieldName: '',
                valueList: [
                    {
                        value: '',
                        name: ''
                    }
                ],
            },
            rules: {
                fieldName: [
                    { required: true, message: this.$t('order.setting.title5'), trigger: 'blur' },
                ],
                value: [
                    { required: true, message: this.$t('order.setting.title6'), trigger: 'blur' },
                ]
		    },
            isEdit: false,
            editId: '',
        }
	},
    methods: {
        getFormItem() {
            let { fieldName,  valueList } = this.form
             let valueArr = valueList.map(item=>item.value)
            return {
                specsName: fieldName,
                specsValue: valueArr
            }
        },
        async confirm() {
            await this.$refs.form.validate((valid) => {
                if (valid) {
                    let valueArr = this.form.valueList.map(item=>item.value)
                    let flag = this.isRepeat(valueArr)
                    if(flag) return this.$message.error(this.$t('order.setting.title7'));
            
                    let params = this.getFormItem()
                    if(this.isEdit) params.id = this.editId
                    saveSpecs(params).then(res => {
                        if(res.code != 200) return this.$message.error(res.msg);
                        this.specsList = res.data
                        this.$emit('confirmSpecs')
                        this.closeDialog()
                    }).catch(err => {
                        this.$message.error(res.msg);
                        this.closeDialog()
                    })
                }
            })
        },
        isRepeat(arr) {
            var hash = {}
            for (var i in arr) {
                if (hash[arr[i]]) { return true }
                hash[arr[i]] = true
            }
            return false
        },
        closeDialog() {
            this.dialogVisible = false
            this.$refs.form.resetFields();
            this.form = {
                fieldName: '',
                valueList: [
                    {
                        value: '',
                        name: ''
                    }
                ],
            }
        },
        openDialog(item) {
            if(!isEmpty(item)) {
                this.isEdit = true
                this.form.fieldName = item.specsName
                this.form.valueList = item.specsValue.map(items => {
                    return {
                        value: items,
                        name: items
                    }
                })
                this.editId = item.id
            }
            this.dialogVisible = true
        },
        addSpecsValue() {
            if(this.form.valueList.length == 10) return this.$message.error(this.$t('order.setting.title8'));
            this.form.valueList.push({
                value: '',
                name: ''
            })
        },
        delValue(index) {
            if(this.form.valueList.length <= 1)  return this.$message.error(this.$t('order.setting.title9'));
            this.form.valueList.splice(index, 1)
        },
    }
}
</script>


<style lang="scss" scoped>
.logistics_setting_box {
    padding: 16px 20px;
}
.item-desc {
    display: flex;
    flex: 1;
    .icon-delete {
        margin-left: 8px;
    }
}
.el-form-item {
    margin-bottom: 15px;
}
.specs-value:last-child{
    margin-bottom: 0px
}
</style>
